<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jenkins-cn</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div align="center">
        <div><a href="https://github.com/jenkins-zh/docker-zh">开箱即用方案</a>提供了无需任何配置即可使用 Jenkins 中国镜像源的体验。</div>
        <img alt="GitHub stars" src="https://img.shields.io/github/stars/jenkins-zh/docker-zh?style=social">
        <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/jenkins-zh/docker-zh">
        <img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/jenkinszh/jenkins-zh">
        <img alt="Docker Stars" src="https://img.shields.io/docker/stars/jenkinszh/jenkins-zh">
        <a href='https://bintray.com/jenkins-zh/jenkins-cli/jenkins/2.204.2/link'><img src='https://api.bintray.com/packages/jenkins-zh/jenkins-cli/jenkins/images/download.svg?version=2.204.2'></a>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="chart" style="width:100%;height:680px;"></div>
            </div>
        </div>
    </div>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js"></script>
<script>
    function setChart(data) {
        var myChart = echarts.init($("#chart")[0]);
        var chartData = data.Data.Data;
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'Jenkins 中国镜像源下载数据'
            },
            tooltip: {},
            legend: {
                data: ['下载量']
            },
            xAxis: {
                data: Object.keys(chartData)
            },
            yAxis: {},
            series: [{
                name: '下载量',
                type: 'line',
                data: Object.values(chartData)
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    $(function () {
        // 跨域问题无法使用
        $.getJSON("https://updates.jenkins-zh.cn/plugins", function (result) {
            if (result.Error == null) {
                setChart(result);
            }
        });
    });
</script>

</html>
